<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import * as approveAPI from "../../api/approve";
import * as userAPI from "../../api/user";
import {Edit, MoreFilled} from '@element-plus/icons-vue'
import {ElMessageBox} from 'element-plus'
import {useUserStore} from "@/stores/user";

const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('是否退出审批界面?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}
const activitiesIndex = 2
const tem = []
for (let i = 0; i < 3; i++) {
  if (i<activitiesIndex-1){
    tem[i] = {
      content: '审批通过',
      timestamp: i+1+'级审批',
      color: '#0bbd87',
    }
  }else if (i == activitiesIndex-1){
    tem[i] = {
      content: '当前进度',
      timestamp: i+1+'级审批',
      size: 'large',
      type: 'primary',
      icon: MoreFilled,
    }
  }else {
    tem[i] = {
      content: '未开始',
      timestamp: i+1+'级审批',
      size: 'large',
    }
  }



}

const pageData = reactive({
  list: [],
  pageParams: {
    pageSize: 5,
    pageLocal: 1
  },
  total: 10
})
const pageSettings = reactive({
  page:{
    pageSize: 5,
    pageLocal: 1,
  },
  username:useUserStore().user.username+''
})

const pageDisabled = ref(false)
const getApproveList =async()=>{
  pageDisabled.value = true
  try {
    const data = await approveAPI.getApproveList(pageSettings)
    pageData.total = data.total
    pageData.list = data.list as any
  }catch (e) {
    return
  }finally {
    pageDisabled.value = false
  }
}
let userMessage=ref({
  id: 0,
  userAddress: '',
  userAge: 0,
  userIdCard: '',
  userIncome: 0,
  userName: '',
  userPhone: '',
  userSex: '',
  userSelfIntroduction: ''

})
const getUserMessage =async (userId:number)=>{
  try {
    userMessage.value = await userAPI.getUserMessageByUserId(userId)
  }catch (e){
    return
  }

}
onMounted(async () => {
  await getApproveList()
})
let ind = ref(0)
function approve (index:number){
  getUserMessage(pageData.list[index]['userId'])
  ind.value = index
  dialogVisible.value = true
  // alert()
  // sessionStorage.setItem('approveId','1')
  // router.push('/approveForm')
}

</script>

<template>
  <div class="main-container">
    <div class="main-main">
      <el-table :data="pageData.list" >
        <el-table-column type="index" label="索引" min-width="30px"/>
        <el-table-column label="工单编号" prop="id"/>
        <el-table-column label="申请时间" prop="loanStartTime"/>
        <el-table-column label="贷款编号" prop="loanId"/>
        <el-table-column label="金额" prop="money"/>
        <el-table-column label="用户" prop="userId"/>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" :icon="Edit" @click="approve(scope.$index)"  circle/>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="main-footer">
      <el-pagination
          v-model:current-page="pageData.pageParams.pageLocal"
          v-model:page-size="pageData.pageParams.pageSize"
          :page-sizes="[1, 2, 3, 4, 5]"
          :total="pageData.total"
          pager-count="5"
          :disabled="pageDisabled"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @update:current-page="getApproveList"
          @update:page-size="getApproveList"
      />
    </div>
    <el-dialog
        v-model="dialogVisible"
        :title="'订单'+'详细信息'"
        width="60%"
        :before-close="handleClose"
    >


      <h3>{{pageData.list[ind]['id']}}号工单审批进度</h3>
      <el-row>
        <el-col :span="6">
          <el-timeline>
            <el-timeline-item
                v-for="(activity, index) in tem"
                :key="index"
                :icon="activity.icon"
                :type="activity.type"
                :color="activity.color"
                :size="activity.size"
                :hollow="activity.hollow"
                :timestamp="activity.timestamp"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </el-col>
        <el-col :span="18">
          <el-descriptions
              title="借贷用户信息"
              direction=vertical
              :column="4"
              border
          >
            <el-descriptions-item label="Username">{{userMessage.userName}}</el-descriptions-item>
            <el-descriptions-item label="Telephone">{{userMessage.userPhone}}</el-descriptions-item>
            <el-descriptions-item label="Income" :span="2">{{userMessage.userIncome}}</el-descriptions-item>
            <el-descriptions-item label="age" >{{userMessage.userAge}}</el-descriptions-item>

            <el-descriptions-item label="性别">
              <el-tag size="small">{{userMessage.userSex}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="身份证"
            >{{userMessage.userIdCard}}
            </el-descriptions-item>
            <el-descriptions-item label="个人介绍"
            >{{userMessage.userSelfIntroduction}}
            </el-descriptions-item>
            <el-descriptions-item label="地址"
            >{{userMessage.userAddress}}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>



      <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogVisible = false">Cancel</el-button>
                  <el-button type="primary" @click="dialogVisible = false">
                    Confirm
                  </el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="less">
.main-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 20px 20px 0;
}

.main-header {
  height: 60px;
}

.main-main {
  position: relative;
  flex: 1;
  height: 0;

  .introduction {
    h3 {
      font-size: 20px;
    }

    p {
      text-indent: 2em;
      font-size: 18px;
    }
  }
}

.main-footer {
  margin-top: 20px;
  margin-bottom: 10px;
  .el-pagination {
    justify-content: center;
    height: 100%;
  }
}
 .dialog-footer button:first-child {
   margin-right: 10px;
 }
</style>